<template>
	<view class="sysMessage">
		<view class="sysMessage-plate-1">
			<view class="item" v-for="(item,index) in messageList" :key="index" @click="goSysDetail(item.message_id,item.rec_id)">
				<view class="time">
					{{item.send_time}}
				</view>
				<view class="content">
					<view class="content-title">
						{{item.title}}
					</view>
					<image :src="item.pic" mode=""></image>
					<view class="txt">
						{{item.profile}}
					</view>
				</view>
			</view>
		</view>
		<view class="nullList" v-if="messageList.length == 0">
			<image src="../../../static/ic_empty_order.png" mode="widthFix"></image>
			<text>暂无系统消息</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				messageList:[]
			}
		},
		onReachBottom() {
			this.page ++
			this.getMessageList()
		},
		created() {
			this.getMessageList()
		},
		methods: {
			// 前往详情页面
			goSysDetail(id,rec_id){
				uni.navigateTo({
					url:'sysDetail/sysDetail?id=' + id + '&rec_id=' + rec_id
				})
			},
			//请求消息列表
			getMessageList(){
				uni.request({
				    url:this.$Url +'/index.php/app/users/messageList',
				    method:'POST',
				    data:{
				       p:this.page
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.messageList = this.messageList.concat(res.data.data.messageList)
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.sysMessage{
	width: 100vw;
	min-height: 100vh;
	background-color: #f5f5f5;
	.sysMessage-plate-1{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		.item{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.time{
				font-size: 22upx;
				color: #999;
				height: 80upx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.content{
				width: 690upx;
				border-radius: 20upx;
				box-shadow: 0px 0upx 5upx 6upx rgba(0,0,0,0.05);
				background-color: #fff;
				padding: 0 20upx;
				.content-title{
					color: #333;
					font-size: 28upx;
					height: 60upx;
					display: flex;
					align-items: center;
				}
				image{
					width: 100%;
				}
				.txt{
					margin-top: 10upx;
					margin-bottom: 10upx;
					font-size: 26upx;
					color: #666;
				}
				
			}
		}
	}
	.nullList{
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		height: 740upx;
		image{
			width: 220upx;
			margin-bottom: 30upx;
		}
		text{
			font-size: 30upx;
			color: #999;
		}
	}
}
</style>
